﻿

EF.Trailblazers.Activity.VideoSequencing = EF.Trailblazers.Activity.VideoSequencing || {};

EF.Trailblazers.Activity.VideoSequencing.models = {

    "ActivityId": 10650,
    "ActivityType": "VideoSequencing",
    "CorrectAnswerCount": 4,
    "EndTime": "\/Date(1350337598000-0400)\/",
    "FrameworkType": "Standard",
    "MyCorrectAnswerCount": 1,
    "Score": 0,
    "StartTime": "\/Date(1350337577000-0400)\/",
    "StudentId": 14402700,
    "TimeElapsed": 21,
    "content": [
		{
		    "Answer": "5,6,4,3,2,1",
		    "CorrectAnswer": "1,2,3,4,5,6",
		    "Score": 50
		}, {
		    "Answer": "5,4,3,2,1,6",
		    "CorrectAnswer": "1,2,3,4,5,6",
		    "Score": 50
		}
	]

};
 

EF.Trailblazers.Activity.VideoSequencing.ready = function (data) {

    //init activity layout and the behavior

    //load content template
    $(".act_container").setTemplateElement("VideoSequencingTemplate").processTemplate(data);

    //bind activity events 
    
    $(".act_drag_box").hover(function () { $(this).css("cursor", "move"); });
    $(".act_drag_box").draggable({
        revert: true,
        revertDuration: "300",
        containment: "act_content",
        zIndex: 101,
        drag: function (event, ui) {
            var parent = $("#" + $(this).attr("parent"));
            parent.css({ "z-index": "100" });
            //1. set transform none
            if (parent.css('transform') != 'matrix(1, 0, 0, 1, 0, 0)') {
                parent.data("transform", parent.css('transform'));
                var transform = 'matrix(1, 0, 0, 1, 0, 0)';

                parent.css({ '-webkit-transform': transform });
                parent.css({ '-moz-transform': transform });
                parent.css({ '-ms-transform': transform });
                parent.css({ 'transform': transform });
            }

            if (ui.helper.parent().hasClass("act_sequen_placeholder")) {

                var transform = parent.data("transform");
                parent.css({ '-webkit-transform': transform });
                parent.css({ '-moz-transform': transform });
                parent.css({ '-ms-transform': transform });
                parent.css({ 'transform': transform });
            }
        },
        stop: function (event, ui) {
            var parent = $("#" + $(this).attr("parent"));
            parent.css({ "z-index": "auto" });

            var transform = parent.data("transform");
            parent.css({ '-webkit-transform': transform });
            parent.css({ '-moz-transform': transform });
            parent.css({ '-ms-transform': transform });
            parent.css({ 'transform': transform });
        }
    });

    $(".act_sequen_placeholder").droppable({
        tolerance: "pointer",
        drop: function (event, ui) {

            // --
            var _sequency = $(ui.draggable).attr("Sequency");
            var _index = $(".act_sequen_placeholder").index(this);
            var _models = EF.Trailblazers.Activity.VideoSequencing.models;

            //change position
            if ($(this).find(".act_drag_box").length == 1) {

                var children = $(this).find(".act_drag_box");
                var children_clone = children.clone();
                var offset_child = calcOffset(children.offset(), ui.draggable.parent().offset());
                var offset_drag = calcOffset(ui.draggable.offset(), $(this).offset());

                // b to s
                if (ui.draggable.css("width") == "188px") {

                    var $parent = $("#" + children.attr("parent"));
                    var offset = calcOffset(children.offset(), $parent.offset());

                    children.appendTo($parent);
                    children.css(offset);

                    children.css({ "width": "188px", "height": "130px" });
                    children.find(".act_img_box")
                                .css({ "left": "0px", "top": "0px" })
                                .css({ "width": "158px", "height": "104px" })
                                .css({ "margin-top": "13px", "margin-left": "15px" });

                    $(".act_drag_box").draggable('disable');
                    children.animate({ "left": "0px", "top": "0px" }, 1000, "easeOutBounce", function () {
                        $(".act_drag_box").draggable('enable');
                    });

                } else {
                    children.appendTo(ui.draggable.parent());
                    //s to s
                    children.css(offset_child);
                    children.find(".act_img_box")
                        .css({ "left": "0px", "top": "0px" })
                        .css({ "width": ui.draggable.find(".act_img_box").width() })
                        .css({ "height": ui.draggable.find(".act_img_box").height() })
                        .css({ "margin-top": ui.draggable.find(".act_img_box").css("margin-top"), "margin-left": ui.draggable.find(".act_img_box").css("margin-left") });
                    children.css({ "width": ui.draggable.width(), "height": ui.draggable.height() });

                    $(".act_drag_box").draggable('disable');
                    children.animate({ "left": "0", "top": "0" }, 600, "easeOutBounce", function () {
                        $(".act_drag_box").draggable('enable');
                    });
                }
                ui.draggable.appendTo(this);


                ui.draggable.css(offset_drag);
                ui.draggable.find(".act_img_box")
                        .css({ "left": "0px", "top": "0px" })
                        .css({ "width": children_clone.find(".act_img_box").width() })
                        .css({ "height": children_clone.find(".act_img_box").height() })
                        .css({ "margin-top": children_clone.find(".act_img_box").css("margin-top"), "margin-left": children_clone.find(".act_img_box").css("margin-left") });
                ui.draggable.css({ "width": children_clone.width(), "height": children_clone.height() });

                ui.draggable.animate({ "left": "0", "top": "0" }, 600, "easeOutBounce");
                return;
            }

            var offset = calcOffset(ui.draggable.offset(), $(this).offset());
            ui.draggable.appendTo(this);
            ui.draggable.css(offset);
            ui.draggable.find(".act_img_box")
                    .css({ "left": "0px", "top": "0px" })
                    .css({ "width": "135px", "height": "90px" })
                    .css({ "margin-top": "0", "margin-left": "0" });
            ui.draggable.css({ "width": "135px", "height": "90px" });

            ui.draggable.animate({ "left": "0px", "top": "0px" }, 300, "easeOutBounce");


            var _answerArr = [];

            $(".act_sequen_placeholder").each(function (i, n) {
                if ($(this).children().hasClass("act_drag_box")) {
                    _answerArr[i] = $(this).find(".act_drag_box").attr("sequency");
                }
            });
            _models.content[0].Answer = _answerArr.join(",");
            console.log(_models.content[0].Answer);


        },
        activeClass: "ui_state_active",
        hoverClass: "ui_state_hover"
    });

    $(".act_drag_container").droppable({
        tolerance: "pointer",
        drop: function (event, ui) {
            if (ui.draggable.parent().hasClass("act_sequen_placeholder") == false)
                return;

            var $parent = $("#" + ui.draggable.attr("parent"));
            var offset = calcOffset(ui.draggable.offset(), $parent.offset());

            ui.draggable.appendTo($parent);
            ui.draggable.css(offset);
            ui.draggable.find(".act_img_box")
                    .css({ "left": "0px", "top": "0px" })
                    .css({ "width": "158px", "height": "104px" })
                    .css({ "margin-top": "13px", "margin-left": "15px" });
            ui.draggable.css({ "width": "188px", "height": "130px" });

            ui.draggable.animate({ "left": "0px", "top": "0px" }, 600, "easeOutBounce");
        }
    });

    function calcOffset(setA, setB) {
        return {
            "left": parseInt(setA.left - setB.left, 10),
            "top": parseInt(setA.top - setB.top, 10)
        }
    }



};


EF.Trailblazers.Activity.VideoSequencing.submit = function (data) {
    //calculate the score and send the result json to server side  

    var _correctAnswerArr = [];
    $.each(data.Content.Questions[0].Options, function (i, v) {
        _correctAnswerArr[i] = v.Sequency;
    });
    EF.Trailblazers.Activity.VideoSequencing.models.content[0].CorrectAnswer = _correctAnswerArr.join(",");

};

